<template>
    <div v-if="rateStatus">
        <div class="m-modal-cov"></div>
        <div class="api m-modal-box">
            <div class="m-modal-header">
                {{title}}
                <span @click="close"><Icon type="close-round"></Icon></span>
            </div>
            <div class="m-modal-content">
                <template>
                    <Tree :data="newBaseData" ></Tree>
                </template>

            </div>
            <div class="m-modal-footer">
              <!--  <Button type="primary"style="width: 80px">提交</Button>-->
            </div>
        </div>
    </div>
</template>
<script>
    import API from '../../config/api'
    import qs from 'qs'
    export default {
        props: ['rateStatus','detailData','titles','names','flags'],
        data() {
            return {
                switchStatus:true,
                newBaseData:[],
                baseData:[]
            }
        },
        watch:{
            detailData(val){
                this.hander(val);
            }

        },
        methods: {
            close() {
                this.$emit('closeModal')
            },
            hander(val){
                if(val!=undefined){
                    //console.log(val)
                    if(this.flags == 'jiFen'){

                    }else if(this.flags == 'shangJi'){

                        if(val.user3){
                            this.newBaseData=[{
                                title: val.user3[0].name,
                                expand: true,
                                children: [{
                                    title: val.user2[0].name,
                                    expand: true,
                                    children: [{
                                        title: val.user1[0].name
                                    }]
                                }]
                            }]

                        }else{
                            if(val.user2){
                                this.newBaseData=[{
                                    title: val.user2[0].name,
                                    expand: true,
                                    children: [{
                                        title: val.user1[0].name,
                                        expand: true
                                    }]
                                }]
                            }else{
                                    this.newBaseData=[{
                                        title:val.user1[0].name,
                                        expand:true}]
                            }
                        }
                    }else{
                       // this.baseData[0].title=this.names;
                      /* let val = {
                            list1:[
                            {loginid:  1 , name: '1 level登录1' , refid: '' },
                            {loginid:  2, name: '1 level登录2', refid: '' },
                            {loginid:  3 , name: '1 level登录3', refid: ''},
                            {loginid:  4, name: '1 level登录4' , refid: ''}],
                            list2: [
                                {loginid:  1 , name: '2 level登录1' , refid: 1},
                                {loginid:  2, name: '2 level登录2', refid: 1},
                                {loginid:  3 , name: '2 level登录3', refid: 2},
                                {loginid:  4, name: '2 level登录4' , refid: 2},
                                {loginid:  5 , name: '2 level登录5' , refid: 3 },
                                {loginid:  6, name: '2 level登录6', refid: 3},
                                {loginid:  7 , name: '2 level登录7', refid: 4},
                                {loginid:  8, name: '2 level登录8' , refid: 4}
                            ],
                            list3: [
                                {loginid:  1 , name: '3 level登录1' , refid: 1},
                                {loginid:  2, name: '3 level登录2', refid: 1},
                                {loginid:  3 , name: '3 level登录3', refid: 2},
                                {loginid:  4, name: '3 level登录4' , refid: 2},
                                {loginid:  5 , name: '3 level登录5' , refid: 3 },
                                {loginid:  6, name: '3 level登录6', refid: 3},
                                {loginid:  7 , name: '3 level登录7', refid: 4},
                                {loginid:  8, name: '3 level登录8' , refid: 4}
                            ]
                        };*/
                        let firstFloors = [{
                            title: this.names,
                            expand: true,
                            children: []
                    }];
                        //构建第一层
                        let firstFloor =  firstFloors[0];
                        if(val.list1){
                            val.list1.forEach(item=>{
                                firstFloor.children.push({
                                    title: item.name,
                                    expand: true,
                                    children: [],
                                    loginid: item.loginid
                                });
                            });
                        }
                        if(val.list2){
                            //构建第二层
                            let secondFloor = firstFloor.children;
                            secondFloor.forEach(item1=>{
                                if(val.list2.length>0){
                                    val.list2.forEach(item2=>{
                                        if(item1.loginid == item2.refid ){
                                            item1.children.push({
                                                title: item2.name,
                                                expand: false,
                                                loginid: item2.loginid,
                                                children: []
                                            });
                                        }
                                    });
                                }

                                if(val.list3){
                                    let thirdFloor  = item1.children;
                                    thirdFloor.forEach(item3=>{
                                        val.list3.forEach(item4=>{
                                            if(item3.loginid == item4.refid ){
                                                item3.children.push({
                                                    title: item4.name,
                                                    expand: false,
                                                    loginid: item4.loginid
                                                });
                                            }
                                        });
                                    });
                                }

                            });
                        }



//                        if(mockData.list2.length>0){
//                            for(let j=0;j<mockData.list2.length;j++){
//                                let mockData2 =  mockData.list2[i];
//                                if(mockData1.loginid == mockData2.refid ){
//                                    thirdFloors.children.push({
//                                        title: mockData2.name,
//                                        expand: true,
//                                        children: []
//                                    });
//                                }
//                            }
//                        }


                        this.newBaseData = firstFloors;


                       // this.baseData[0].children[0].title=val.list1[0].name;
  /*                      if(val.list2.length>0){

                            this.baseData[0].children[0].children[0].title=val.list2[0].name;
                        }else{
                            this.baseData[0].children[0].children[0].title='';
                        }*/
                    }
                }

            }
        },
        computed: {
            title(){
                switch (this.dealerId){
                    case 0:
                        return '<<>>推荐的人';
                    default:
                        return  this.titles;
                }
            },
            dataList(){
                //console.log(this.detailData)
            }

        }
    }
</script>
<style scoped>
    .m-modal-cov {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: #000;
        z-index: 101;
        top: 0;
        left: 0;
        opacity: .5;
    }
    .m-modal-box {
        position: fixed;
        width: 800px;
        z-index: 102;
        margin-left: 10%;
        background-color: #fff;
        border-radius: 5px;
    }
    .m-modal-content {
        padding: 20px;
    }
    .m-modal-header {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        border-bottom: 1px solid #d6d6d6;
        padding: 0 10px 0 20px;
    }
    .m-modal-header span {
        float: right;
        padding: 0 10px;
        cursor: pointer;
    }
    .m-modal-footer {
        height: 50px;
        line-height: 50px;
        border-top:1px solid #d6d6d6;
        padding-right: 20px;
        text-align: right;
    }
    .m-modal-content-header {
        height: 40px;
    }
    .api table {
        font-family: Consolas,Menlo,Courier,monospace;
        font-size: 12px;
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #e9e9e9;
        width: 100%;
        margin-bottom: 24px;
    }
    .api table td, .api table th {
        border: 1px solid #e9e9e9;
        padding: 8px 16px;
        text-align: left;
    }
    .api table th {
        background: #f7f7f7;
        white-space: nowrap;
        color: #5c6b77;
        font-weight: 600;
    }
    .car-header {
        background-color: #f7f7f7;
        padding-left: 15px;
        border: 1px solid #e9eaec;
        border-radius: 2px;
        height: 30px;
        line-height: 30px;
    }
</style>
